import React from "react"
import { Field, Input, Button /** Countdown **/ } from "@taroify/core"
import GpContainer from "@/components/GpContainer"
import clsx from "clsx"
import { Swiper, SwiperItem, Image, Navigator, Text, View } from "@tarojs/components"
import GpJumpNavs from "@/components/GpJumpNavs"
import GpCurrentPort from "@/components/GpCurrentPort"
import GpTabbar from "@/components/GpTabbar"
import GpIcon from "@/components/GpFontIcon"
import Taro from "@tarojs/taro"
import { commitForm } from "@/apis/index"
import { setPageMeta } from "@/utils/common"
import styles from "./index.module.scss"
import { commonUrls } from "@/utils/router"

const ports = [{ text: "报考指南" }]
// const leftCount = 10 * 1000
type IFormField = {
  username: string
  course: string
  phone: string
  verifycode: string
}
interface IState extends IFormField {
  canResend: boolean
  pending: boolean
}
type FormFieldName = keyof IFormField
class TrainGuide extends React.Component<unknown, IState> {
  constructor(props) {
    super(props)
    this.state = {
      username: "",
      course: "",
      phone: "",
      verifycode: "",
      canResend: true,
      pending: false
    }
  }
  onShareAppMessage() {}
  componentDidShow() {
    setPageMeta({
      keywords: "试听课程，预约机构",
      title: "预约试听-择艺宝",
      description:
        "找不到合适机构？不知道哪家机构更合适？择艺宝为您提供预约试听服务，填写个人求学要求，由平台老师为您匹配最佳机构。"
    })
  }
  /** 轮播 */
  renderSwiper = () => {
    return (
      <View>
        <Swiper
          className="h-248px"
          indicatorColor="rgba(255, 255, 255, 0.5)"
          indicatorActiveColor="#FFFFFF"
          circular
          indicatorDots
          autoplay
        >
          <SwiperItem>
            <View
              onClick={this.resetForm}
              className="w-690px h-248px rounded-16px  overflow-hidden mx-auto"
            >
              <Image
                src="https://static.91goodschool.com/UpFiles/public/yikao/image/banner_1.png"
                className="w-690px h-248px"
                mode="aspectFill"
              />
            </View>
          </SwiperItem>
          <SwiperItem>
            <Navigator
              url={commonUrls.institution}
              hoverClass="none"
              className="w-690px h-248px rounded-16px  overflow-hidden mx-auto"
              openType="switchTab"
            >
              <Image
                src="https://static.91goodschool.com/UpFiles/public/yikao/image/banner_2.png"
                className="w-690px h-248px"
                mode="aspectFill"
              />
            </Navigator>
          </SwiperItem>
          <SwiperItem>
            <Navigator
              url={commonUrls.news}
              hoverClass="none"
              className="w-690px h-248px rounded-16px  overflow-hidden mx-auto"
            >
              <Image
                src="https://static.91goodschool.com/UpFiles/public/yikao/image/banner_3.png"
                className="w-690px h-248px"
                mode="aspectFill"
              />
            </Navigator>
          </SwiperItem>
        </Swiper>
      </View>
    )
  }
  handleFieldChange = (value: string, field: FormFieldName) => {
    this.setState({
      [field]: value
    })
  }
  handleSumbit = () => {
    const { username, course, phone } = this.state
    if ([username, course, phone].some(l => !l)) {
      Taro.showToast({
        title: "请填写完整信息再提交",
        icon: "none"
      })
      return
    }
    this.setState({
      pending: true
    })
    commitForm({
      name: username,
      mobile: phone,
      profession: course
    })
      .then(() => {
        Taro.showToast({
          title: "提交成功",
          icon: "success"
        })
        this.resetForm()
      })
      .finally(() => {
        this.setState({
          pending: false
        })
      })
  }
  handleComplete = () => {
    this.setState({
      canResend: true
    })
  }
  sendCode = () => {
    this.setState({
      canResend: false
    })
  }
  resetForm = () => {
    this.setState({
      username: "",
      phone: "",
      course: ""
    })
  }
  renderContent = () => {
    const { username, course, phone, verifycode, canResend, pending } = this.state
    return (
      <View className="pt-35px ">
        {this.renderSwiper()}
        <View className="pt-65px pb-48px ">
          <View className="yahei font-normal text-40px text-hex-2c2c35 text-center">
            <GpIcon
              icon="icon-a-zhuangshizuobian_huaban1"
              size={40}
              color="#FAAB10"
              className="pr-20px align-middle"
            />
            <Text>专业老师为您解答疑惑</Text>
            <GpIcon
              icon="icon-a-zhuangshiyoubian_huaban1"
              size={40}
              color="#FAAB10"
              className="pl-20px align-middle"
            />
          </View>
          <View className="mt-51px px-30px bg-hex-fff">
            <View className={styles["form-wrap"]}>
              <Field
                label={null}
                name="username"
                className={clsx(styles["form-field"], "form-field")}
              >
                <Input
                  placeholder="请输入您的姓名"
                  value={username}
                  onChange={e => this.handleFieldChange(e.detail.value, "username")}
                  placeholderClassName={styles.controlPlaceholoder}
                  className={styles.control}
                />
              </Field>
              <Field
                label={null}
                name="course"
                className={clsx(styles["form-field"], "form-field")}
              >
                <Input
                  placeholder="请输入您的意向课程"
                  value={course}
                  onChange={e => this.handleFieldChange(e.detail.value, "course")}
                  placeholderClassName={styles.controlPlaceholoder}
                  className={styles.control}
                />
              </Field>
              <Field label={null} name="phone" className={clsx(styles["form-field"], "form-field")}>
                <Input
                  placeholder="请输入您的手机号码"
                  value={phone}
                  onChange={e => this.handleFieldChange(e.detail.value, "phone")}
                  placeholderClassName={styles.controlPlaceholoder}
                  className={styles.control}
                />
              </Field>
              {/* <Field
                align="center"
                name="verifycode"
                label={null}
                className={clsx(styles["form-field"], "form-field")}
              >
                <Input
                  placeholder="请输入您的手机号码"
                  value={verifycode}
                  onChange={e => this.handleFieldChange(e.detail.value, "verifycode")}
                  placeholderClassName={styles.controlPlaceholoder}
                  className={styles.control}
                />
                {canResend ? (
                  <Button
                    variant="text"
                    color="primary"
                    size="small"
                    className={styles["code-btn"]}
                    onClick={this.sendCode}
                  >
                    获取验证码
                  </Button>
                ) : (
                  <Countdown value={leftCount} onComplete={this.handleComplete}>
                    {current => <Text className="text-hex-2C2C35">{current.seconds}s</Text>}
                  </Countdown>
                )}
              </Field> */}
              <Button
                loading={pending}
                color="primary"
                className={styles["submit-btn"]}
                block
                onClick={this.handleSumbit}
              >
                免费帮我预约
              </Button>
            </View>
          </View>
        </View>
      </View>
    )
  }
  /** 快捷导航 */
  renderJumpNavs = () => {
    return (
      <View className="mt-20px">
        <GpJumpNavs />
      </View>
    )
  }
  render(): React.ReactNode {
    return (
      <GpContainer>
        <View>
          {this.renderContent()}
          {/* 快捷导航 */}
          {this.renderJumpNavs()}
          {/* 当前位置 */}
          <GpCurrentPort ports={ports} />
        </View>
        {/* 底部导航 */}
        <GpTabbar preserve />
      </GpContainer>
    )
  }
}
export default TrainGuide
